<template>
	<view>
		<view class="cn_se">
			<view class="cn_se_tit">您的考试目标是？</view>
			<view class="cn_se_inp">
				 <input class="cn_se_text" v-model="inputValue" placeholder="请选择您的考试分类"   disabled/>
				 <view>（注：只可选择一门考试）</view>
			</view>
		</view>
		 <view class="addClass">请选择项目</view>
		 <view class="clssLis">
			 <view :class="item.id == id?'getClasssSe getClass':'getClass'" v-for="(item, index) in classList" :key="index" @click="getClass(item.id,item.name)">{{item.name}}</view>
		 </view>
		
	</view>
</template>

<script>
 
	var interstitialAd = null;
	export default{
		data(){
			return{
				classList: [],
				inputValue:"",
				requestStatus: false, // 事件防抖
				id:"",
				name:""
			}
		},
		onLoad(e) {
			this.getList()
		},
		methods: {
			getClass(id,name){
				this.id = id
				this.name = name
				this.selTopClass()
			},
			getList() {
				this.http('common/getCatelist', {}, 'post').then(res => {
						console.log('grade res', res)
						if (res.code == 0) {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
							return
						} else {
							this.classList = res.data
						}
					})
				},	
			selTopClass() {
				this.http('grade/index', {id: this.id}, 'post').then(res => {
						console.log('grade res', res)
						if (res.code == 0) {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
							return
						} else {
							this.utils.goto('cate?id=' + this.id + "&name=" + this.name)
						}
					})
			}
		}
	}
</script>

<style scoped>
	page {background-color: #ebeef3;}
	.cn_se{background-image:linear-gradient(to bottom, #5677fc, #7991f3); text-align: center;}
	.cn_se_tit{font-size: 50rpx;color: #FFF;font-weight: 800;}
	.cn_se_inp{position: relative;background: #FFF;padding:40rpx 20rpx;top: 80rpx;width: 90%;
	margin: 0 auto;border-radius: 12rpx;box-shadow: 0rpx 6rpx 16rpx #d2d7ef;}
	.cn_se_inp view{color: #afafaf;margin-top: 0px;border-top: 1rpx solid #DDD;padding-top: 10px;}
	.cn_se_text{ height: 100rpx;color: #333;padding: 15rpx;}
	.addClass{color: #333;font-weight: 800;font-size: 40rpx;margin: 150rpx auto 30rpx;text-align: center;}
	.clssLis{width:90%;margin: 0 auto;}
	.getClass{width: 44%;border-radius: 60rpx;padding: 20rpx 10rpx;background: #FFF;text-align: center;margin:20rpx 2%;display: inline-block;}
	.getClasssSe{color: #FFF;background-color:#5f7efa;box-shadow:  0rpx 6rpx 16rpx #d2d7ef;}
</style>